#include("../../layout/header.html")
#@layout()
#define content()
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格搜索栏 -->
            <form id="form" class="layui-form toolbar">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">发送时间:</label>
                        <div class="layui-input-inline">
                            <input name="sendTime" class="layui-input"
                                   placeholder="选择发送时间日期范围" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户:</label>
                        <div class="layui-input-inline">
                            <div id="userSelect"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否已读:</label>
                        <div id="readRadio" class="layui-input-block"></div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="dataTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="refresh" class="layui-btn icon-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i>
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
<!-- 表单弹窗 -->
<!-- 表格操作列 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'formX', 'laydate', 'tableX','badgeX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var tableX = layui.tableX;
        var formX = layui.formX;
        var badgeX = layui.badgeX;
        var laydate = layui.laydate;
        var admin = layui.admin;
        var messageType = [], messagePosition = [], messageSendType = [], orgs = [], users = [], userRead = [];
        var messageId = admin.getLayerData().messageId;

        admin.req('/sys/sysUser/selectData', {}, function (d) {
            if (0 === d.code) {
                users = d.data;
                formX.renderMultiSelect({el:'#userSelect',name:'userId',value:'id',data:users})

            }
        })
        admin.getDict({type: 'boolean,'}, function (d) {
            if (0 === d.code) {

                userRead = d.data.boolean;
                formX.renderRadio({
                    elem: '#readRadio',
                    data: userRead,
                    name: 'read',
                    title: 'name',
                    value: 'value',
                })
                /*最后渲染组件*/
                form.render();
            }
        })


        laydate.render({
            elem: 'input[name="sendTime"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });


        /* 渲染表格 */
        var insTb = tableX.init({
            url: '/sys/message/getRecord',
            toolbar: '',
            limit:20,
            where: {
                messageId: messageId
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {type: 'numbers', title: '序号', fixed: 'left', minWidth: 80},
                {field: 'userStr', title: '用户id'},
                {field: 'readStr', title: '是否已读',templet: function (d) {
                        return d.isRead == 0 ? badgeX.initNo() : badgeX.initYes();
                    }},
                {field: 'sendTime', title: '发送时间'},
            ]]
        });

        /* 表格搜索 */
        form.on('submit(dataTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });


        $('#refresh').click(function () {
            window.location.reload()
        })

    });
</script>
</body>
#end
